import { Spin } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';

import color from '@/src/css/colors';

import styles from './index.less';

import { CircleChartsC, SecondHeaderC } from '../../../comps';

class ProductViewC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 左边卡片
      data: null,
      // 右边卡片
      modeData: null,
    };
  }

  // 获取数据
  getProductViewInfo = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'organProductAnalysisM/getProductViewInfo',
      payload: {},
      callback: (info) => {
        const { COMMAND_MODE, BOOKKEEPING_MODE, VALUATION_BOOKKEEPING_MODEL, VALUATION_TABLE_ANALYSIS_MODE } = info.productTradeModelNum ? info.productTradeModelNum : {};
        const modeData = info.productTradeModelNum
          ? [
              { value: COMMAND_MODE ?? 0, name: '指令模式' },
              { value: BOOKKEEPING_MODE ?? 0, name: '簿记模式' },
              { value: VALUATION_BOOKKEEPING_MODEL ?? 0, name: '估值系统对接模式' },
              { value: VALUATION_TABLE_ANALYSIS_MODE ?? 0, name: '估值表解析模式' },
            ]
          : [];
        this.setState({
          data: info,
          modeData,
        });
      },
    });
  };

  componentDidMount() {
    this.getProductViewInfo();
  }

  render() {
    const { data, modeData } = this.state;
    return (
      <div>
        <SecondHeaderC title='产品概览' />
        <div style={{ marginTop: '10px', display: 'flex' }}>
          <div className={styles.AsNow} style={{ width: 642, marginRight: 16 }}>
            <Spin spinning={!data}>
              <div className={styles.bac}>
                <div className={styles.title}>截至当前</div>
                <div className={styles.info}>
                  <div className={styles.num}>
                    <span>{data?.institutionNum ?? '--'}</span>
                    <span>{data?.productNum ?? '--'}</span>
                    <span>{data?.durationProductNum ?? '--'}</span>
                  </div>
                  <div className={styles.des}>
                    <span>累计机构数量</span>
                    <span>累计产品数</span>
                    <span>存续期产品</span>
                  </div>
                </div>
              </div>
              <div className={styles.bac}>
                <div className={styles.title}>本年度</div>
                <div className={styles.info}>
                  <div className={styles.num}>
                    <span>{data?.addProductNum ?? '--'}</span>
                    <span>{data?.expireProductNum ?? '--'}</span>
                  </div>
                  <div className={styles.des}>
                    <span>新增产品数</span>
                    <span>到期产品数</span>
                  </div>
                </div>
              </div>
            </Spin>
          </div>
          <div style={{ width: 'calc(100% - 626px)' }}>
            <Spin spinning={!modeData}>
              <CircleChartsC
                text='存续产品的交易模式比例'
                textTop='20px'
                titleLeft='20px'
                titleSize={14}
                data={modeData ?? []}
                height={300}
                type='ring'
                center={['40%', 'center']}
                radius={['50', '70']}
                legendTextWidth={150}
                toolTipFormat={(params) => `<div style="display:flex;align-items:center;margin-bottom:8px;color:${color.echartItems.tooltipLabel}">
                      <div style="border:1px solid ${color.echartItems.toolLable};width:10px;height:10px;border-radius:50%;background-color:${params.color};margin-right:8px"></div>
                      ${params.name}： ${params.data.valueOriginal}
                   </div>`}
                legendFormat='3'
              />
            </Spin>
          </div>
        </div>
      </div>
    );
  }
}
export default connect(({ organProductAnalysisM }) => ({
  organProductAnalysisM,
}))(ProductViewC);
